<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8" isELIgnored="false"%>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt"     uri="http://java.sun.com/jstl/fmt_rt" %>
<%@ taglib uri="/struts-tags" prefix="s" %>
<%@ taglib uri="http://jsptags.com/tags/navigation/pager" prefix="pg" %>

<script type="text/javascript">
<!--
	function viewComments(saId){
		window.location.href = "./SACommentMgr_search.do?saId="+saId;
	}
	
	$(document).ready(function (){
		showStateDetail();
	}); 
	
	function showStateDetail(){
		if($("#sa_hises").is(":hidden")){
			$("#sa_hises").show("slow");
			$("#a4stateShow").html("Hiden Status Detail");
		}else{
			$("#sa_hises").hide("slow");
			$("#a4stateShow").html("Show Status Detail");
		}
	}
	
	function showAttach(attachId){
	    var location = "./AttachmentMgr_show.do?attachmentId="+attachId;
		window.open(location,'','width=790,height=590');
	}
	
	function showAttachments(state){
		$("#dialog:ui-dialog").dialog( "destroy" );
		var dialogTitle = "Attachments for State:" +state;
		$("#dialog").attr("title",dialogTitle);
		 $.getJSON("Json_getSaAttachments.do?saType=ocean&saId=${oceanSa.id}&state="+state+"&random="+Math.random(),function(result){
			 $("#dialog").empty();
			 if(state == "DEP"){
				 $("#dialog").append("<p>${depTitle}</p>");
			 }
			 if(result.length == 0){
				 $("#dialog").append("<p>There are none attachment be finded</p>");
			 }
			 for(var i=0;i<result.length;i++){
				 $("#dialog").append("<p><a href='javascript:void(0)' onclick=\"showAttach("+result[i].attachId+")\">"+result[i].fileName+"</a></p>");
			 }
		 });
		$( "#dialog" ).dialog({
			show: "blind",
			hide: "explode"
		});
	}
	
//-->
</script>

<div class="demo" style="display: none;">
	<div id="dialog" title="">
	</div>
</div>


<s:include value="./component/tip_box.jsp"></s:include>
<table id="inputTable" width="100%" height="100%" style="background-color:#F5F5F5;margin-top:0.1cm;">
	<tr>
		<td>
			<table align="left" width="80%" >
					<tr >
						<td align="right" >
							<table>
								<tr>
									<td><img src="<%=request.getContextPath() %>/img/plane.gif" height="40" width="40"></td>
									<td class="label_bold"> <s:text name="sa.saNo"/>:</td>
								</tr>
							</table>
						</td>
						<td align="left">
							${oceanSa.saNo}
						</td>
						<td align="right" class="label_bold">
							B/L NO:
						</td>
						<td align="left">
							${oceanSa.blNo}	
						</td>
					</tr>
				
					<tr>
						<td align="right" width="25%" class="label_bold">
							 <s:text name="sa.weight"/>:
						</td>
						<td align="left" width="25%">
							${oceanSa.weight}KGS
						</td>
						<td align="right" width="25%" class="label_bold">
							<s:text name="sa.pcb"/>:
						</td>
						<td align="left" width="25%">
							<fmt:formatNumber pattern="###" value="${oceanSa.pcb}"></fmt:formatNumber>
						</td>
					</tr>
					
					<tr>
						<td align="right" class="label_bold">
								<s:text name="sa.orderNo"/>:
						</td>
						<td align="left">
							${oceanSa.orderNo}	
						</td>
						<td align="right" class="label_bold">
						   <s:text name="sa.estimatedDimensions"/>:
						</td>
						<td align="left">
							${oceanSa.estimatedDimensions}
						</td>
					</tr>
					<tr>
						<td align="right" class="label_bold">
							BOOKED ON :
						</td>
						<td align="left" colspan="3" >
							${depTitle}
						</td>
					</tr>
					<tr>
						<td align="right" class="label_bold">
							MBL SHIPPER:
						</td>
						<td align="left" colspan="3" >
							${oceanSa.hawbShipper}
						</td>
					</tr>
				
			</table>
		</td>
	</tr>
	
	<tr>
		<td align="left">
			<a id="a4stateShow" href="javascript:void(0)" onclick="showStateDetail(this)">Show State Detail</a>
		</td>
	</tr>
	
	<tr >
		<td align="left">
			<table   align="left" >
				<tr align="center">
					<c:if test="${status_rbk == 'rbk.gif'}">
						<td>
							<table align="center">
								<tr align="center">
									<td width="60">
										<c:if test="${rbk_attached == true}">
											<img style="border-width: 0" src="<%=request.getContextPath() %>/img/attached.gif">
										</c:if>
									</td>
								</tr>
								<tr>
									<td width="60"  bgcolor="red" title="BOOKING RECEIVED"><a href="javascript:void(0)" onclick="showAttachments('RBK')"><img style="border-width: 0;" height="60" width="60" src="<%=request.getContextPath() %>/img/ocean-sa-state/${status_rbk}"></a></td>
								</tr>
								<tr align="center">
									<td>RBK</td>
								</tr>
							</table>
						</td>
					</c:if>
					<c:if test="${status_oww == 'oww.gif'}">
						<td>
							<table align="center">
								<tr align="center">
									<td width="60">
										<c:if test="${oww_attached == true}">
											<img style="border-width: 0" src="<%=request.getContextPath() %>/img/attached.gif">
										</c:if>
									</td>
								</tr>
								<tr>
									<td width="60" title="ON THE WAY TO WAREHOUSE"><a href="javascript:void(0)" onclick="showAttachments('OWW')"><img style="border-width: 0" height="60" width="60" src="<%=request.getContextPath() %>/img/ocean-sa-state/${status_oww}" ></a></td>
								</tr>
								<tr align="center">
									<td>OWW</td>
								</tr>
							</table>
						</td>
					</c:if>
					
					<c:if test="${status_rcf == 'rcf.gif'}">
						<td>
							<table align="center">
								<tr align="center">
									<td width="60">
										<c:if test="${rcf_attached == true}">
											<img style="border-width: 0" src="<%=request.getContextPath() %>/img/attached.gif">
										</c:if>
									</td>
								</tr>
								<tr>
									<td width="60" title="RECEIVE FREIGHT"><a href="javascript:void(0)" onclick="showAttachments('RCF')"><img style="border-width: 0" height="60" width="60" src="<%=request.getContextPath() %>/img/ocean-sa-state/${status_rcf}" ></a></td>
								</tr>
								<tr align="center">
									<td>RCF</td>
								</tr>
							</table>
						</td>
					</c:if>
					
					<c:if test="${status_rcd == 'rcd.gif'}">
						<td>
						  <table align="center">
								<tr align="center">
									<td width="60">
										<c:if test="${rcd_attached == true}">
											<img style="border-width: 0" src="<%=request.getContextPath() %>/img/attached.gif">
										</c:if>
									</td>
								</tr>
								<tr>
									<td width="60" title="RECEIVE DOCUMENT"><a href="javascript:void(0)" onclick="showAttachments('RCD')"><img style="border-width: 0" height="60" width="60" src="<%=request.getContextPath() %>/img/ocean-sa-state/${status_rcd}" ></a></td>
								</tr>
								<tr align="center">
									<td>RCD</td>
								</tr>
							</table>
						 </td>
					</c:if>
					
					<c:if test="${status_sah == 'sah.gif'}">
						<td>
						  <table align="center">
								<tr align="center">
									<td width="60">
										<c:if test="${sah_attached == true}">
											<img style="border-width: 0" src="<%=request.getContextPath() %>/img/attached.gif">
										</c:if>
									</td>
								</tr>
								<tr>
									<td width="60" title="STORAGE AND HANDLING"><a href="javascript:void(0)" onclick="showAttachments('SAH')"><img style="border-width: 0" height="60" width="60" src="<%=request.getContextPath() %>/img/ocean-sa-state/${status_sah}" ></a></td>
								</tr>
								<tr align="center">
									<td>SAH</td>
								</tr>
							</table>
						</td>
					</c:if>
					
					<c:if test="${status_stp == 'stp.gif'}">
					   <td>
						  <table align="center">
								<tr align="center">
									<td width="60">
										<c:if test="${stp_attached == true}">
											<img style="border-width: 0" src="<%=request.getContextPath() %>/img/attached.gif">
										</c:if>
									</td>
								</tr>
								<tr>
									<td width="60" title="SEND TO PORT"><a href="javascript:void(0)" onclick="showAttachments('STP')"><img style="border-width: 0" height="60" width="60" src="<%=request.getContextPath() %>/img/ocean-sa-state/${status_stp}" ></a></td>
								</tr>
								<tr align="center">
									<td>STP</td>
								</tr>
							</table>
						</td>
					</c:if>
					
					<c:if test="${status_wsr == 'wsr.gif'}">
					   <td>
						 <table align="center">
								<tr align="center">
									<td width="60">
										<c:if test="${wsr_attached == true}">
											<img style="border-width: 0" src="<%=request.getContextPath() %>/img/attached.gif">
										</c:if>
									</td>
								</tr>
								<tr>
									<td width="60" title="WAITING FOR THE SECOND RELEASE"><a href="javascript:void(0)"  onclick="showAttachments('WSR')"><img style="border-width: 0" height="60" width="60" src="<%=request.getContextPath() %>/img/ocean-sa-state/${status_wsr}" ></a></td>
								</tr>
								<tr align="center">
									<td>WSR</td>
								</tr>
							</table>
						</td>
					</c:if>
					
					<c:if test="${status_smp == 'smp.gif'}">
						<td>
						 <table align="center">
								<tr align="center">
									<td width="60">
										<c:if test="${smp_attached == true}">
											<img style="border-width: 0" src="<%=request.getContextPath() %>/img/attached.gif">
										</c:if>
									</td>
								</tr>
								<tr>
									<td width="60" title="SHIPMENT"><a href="javascript:void(0)"  onclick="showAttachments('SMP')"><img style="border-width: 0" height="60" width="60" src="<%=request.getContextPath() %>/img/ocean-sa-state/${status_smp}" ></a></td>
								</tr>
								<tr align="center">
									<td>SMP</td>
								</tr>
							</table>
						</td>
					</c:if>
					
					<c:if test="${status_sal == 'sal.gif'}">
					 <td>
						<table align="center">
								<tr align="center">
									<td width="60">
										<c:if test="${sal_attached == true}">
											<img style="border-width: 0" src="<%=request.getContextPath() %>/img/attached.gif">
										</c:if>
									</td>
								</tr>
								<tr>
									<td width="60" title="SAIL"><a href="javascript:void(0)"  onclick="showAttachments('SAL')"><img style="border-width: 0" height="60" width="60" src="<%=request.getContextPath() %>/img/ocean-sa-state/${status_sal}" ></a></td>
								</tr>
								<tr align="center">
									<td>SAL</td>
								</tr>
							</table>
						</td>
					</c:if>
					
					<c:if test="${status_ddv == 'ddv.gif'}">
					   <td>
						<table align="center">
								<tr align="center">
									<td width="60">
										<c:if test="${ddv_attached == true}">
											<img style="border-width: 0" src="<%=request.getContextPath() %>/img/attached.gif">
										</c:if>
									</td>
								</tr>
								<tr>
									<td width="60" title="DOOR-TO-DOOR VANNING"><a href="javascript:void(0)"  onclick="showAttachments('DDV')"><img style="border-width: 0" height="60" width="60" src="<%=request.getContextPath() %>/img/ocean-sa-state/${status_ddv}" ></a></td>
								</tr>
								<tr align="center">
									<td>DDV</td>
								</tr>
							</table>
						</td>
					</c:if>
					
					<c:if test="${status_arr == 'arr.gif'}">
					  <td>
						<table align="center">
								<tr align="center">
									<td width="60">
										<c:if test="${arr_attached == true}">
											<img style="border-width: 0" src="<%=request.getContextPath() %>/img/attached.gif">
										</c:if>
									</td>
								</tr>
								<tr>
									<td width="60" title="ARRIVAL"><a href="javascript:void(0)" onclick="showAttachments('ARR')"><img style="border-width: 0" height="60" width="60" src="<%=request.getContextPath() %>/img/ocean-sa-state/${status_arr}" ></a></td>
								</tr>
								<tr align="center">
									<td>Arr</td>
								</tr>
							</table>
						</td>
					</c:if>
					
					<c:if test="${status_nfd == 'nfd.gif'}">
						<td>
						 <table align="center">
								<tr align="center">
									<td width="60">
										<c:if test="${nfd_attached == true}">
											<img style="border-width: 0" src="<%=request.getContextPath() %>/img/attached.gif">
										</c:if>
									</td>
								</tr>
								<tr>
									<td width="60" title="NOTIFY CONSIGNEE"><a href="javascript:void(0)" onclick="showAttachments('NFD')"><img style="border-width: 0" height="60" width="60" src="<%=request.getContextPath() %>/img/ocean-sa-state/${status_nfd}" ></a></td>
								</tr>
								<tr align="center">
									<td>NFD</td>
								</tr>
							</table>
					    </td>
					</c:if>
					
					<c:if test="${status_dlv == 'dlv.gif'}">
					  <td>
						 <table align="center">
								<tr align="center">
									<td width="60">
										<c:if test="${dlv_attached == true}">
											<img style="border-width: 0" src="<%=request.getContextPath() %>/img/attached.gif">
										</c:if>
									</td>
								</tr>
								<tr>
									<td width="60" title="DELIVERY"><a href="javascript:void(0)" onclick="showAttachments('DLV')"><img style="border-width: 0" height="60" width="60" src="<%=request.getContextPath() %>/img/ocean-sa-state/${status_dlv}" ></a></td>
								</tr>
								<tr align="center">
									<td>DLV</td>
								</tr>
						</table>
						</td>
					</c:if>
				</tr>
			</table>
		</td>
	</tr>
	
	<tr id="sa_hises"  style="display: none;">
		<s:include value="./component/ocean_sa_hises.jsp"></s:include>
	</tr>
	
	<tr >
		<td>
			<div  style="background-color:#F5F5F5;margin-top:1cm;">
				<s:form action="SaMgr_addComment" validate="false" onsubmit="return onSave()">
					<input name="pager.offset" type="hidden"  value="${pm.offset}">
					<input name="saComment.saId" type="hidden"  value="${oceanSa.id}">
					<input name="editSaId" type="hidden"  value="${oceanSa.id}">
					<div align="left">
						<s:actionmessage cssStyle="color:#0000FF;"/>
						<s:actionerror cssStyle="color:#F00;"/>
					</div>
					<table width="80%" height="60" align="center"> 
						<tr>
							<td align="left"  width="15%">
							    <s:textarea id="comment" name="saComment.comment" rows="4" cssStyle="width: 710px;font-family: Arial;"></s:textarea>
							</td>
						</tr>
						
						<tr>
							<td align="right" width="20%">
								<s:submit key="action.add" action="SaMgr_addComment" cssClass="btn"/>
							</td>
						</tr>
					</table>
				</s:form>
				
				<table width="100%" id="comments">
					<thead>
						<tr class="ui-widget-header">
							<th style="width: 10em;"><s:text name="sa.comment.createTime"/></th>
							<th style="width: 30em;"><s:text name="sa.comment.content"/></th>
							<th style="width: 10em;"><s:text name="sa.comment.createBy"/></th>
						</tr>
					</thead>
					<tbody>
						<s:include value="./component/result_empty.jsp"></s:include>
						<c:forEach var="each" items="${pm.datas}">
							<tr>
								<td><fmt:formatDate value="${each.createTime}" pattern="yyyy-MM-dd HH:mm"/></td>
								<td>${each.comment}</td>
								<td>${each.createBy.username}</td>
							</tr>
						</c:forEach>
					</tbody>
				</table>
			</div>
			
			<div align="left">
			   <pg:pager url="./SaMgr_editSa.do" items="${pm.total}" maxPageItems="${pm.maxPageItems}" export="currentPageNumber=pageNumber">  
						<pg:param name="editSaId"/>
						<pg:page export="firstItem, lastItem">
							<div class="resultInfo">
								Displaying results <strong><%= firstItem %>-<%= lastItem %></strong> of <strong>${pm.total}</strong> found
							</div>
						</pg:page>
						
						<div class="rnav">
							<span class="rnavLabel">Results:</span>&nbsp;
							<pg:prev export="pageUrl">
								<a href="<%= pageUrl %>" class="rnavLink">&#171;&nbsp;Prev</a>&nbsp;
							</pg:prev>
							<pg:pages export="pageUrl,pageNumber,firstItem,lastItem">
							    <% if (pageNumber == currentPageNumber) { %> 
							&nbsp;<span class="rnavCurr"><%= firstItem %>-<%= lastItem %></span>
							    <% } else { %>
							&nbsp;<a href="<%= pageUrl %>" class="rnavLink"><%= firstItem %>-<%= lastItem %></a>
							    <% } %>
							</pg:pages>
							<pg:next export="pageUrl">
								&nbsp;&nbsp;<a href="<%= pageUrl %>" class="rnavLink">Next&nbsp;&#187;</a>
							</pg:next>
						</div>
			   </pg:pager>
			</div>
		</td>
	</tr>
	
</table>


<script type="text/javascript">
<!--
	function onSave(){
		  var errorMsg = "";
			if($("#comment").val().trim()==""){
				errorMsg = '<s:text name="dialog.message.tip.needContent"/>' ;
			}
			if(errorMsg != ""){
				showErrorTip(errorMsg);
				return false;
			}
			return true;
	}
	
	function editSa(saId){
		window.location.href = "./SaMgr_editSa.do?editSaId="+saId;
	}
	
//-->
</script>

	
